import React from 'react';
import { 
  IonPage, 
  IonContent, 
  IonHeader, 
  IonToolbar, 
  IonButtons, 
  IonButton, 
  IonTitle,
  IonIcon,
  IonAvatar,
  IonLabel,
  IonNote,
  IonText,
  IonGrid,
  IonRow,
  IonCol
} from '@ionic/react';
import { 
  arrowBack, 
  checkmarkCircle, 
  trash, 
  ellipsisHorizontal,
  timeOutline,
  personCircleOutline
} from 'ionicons/icons';
import { useHistory, useParams } from 'react-router-dom';

const NotificationDetailPage: React.FC = () => {
  const history = useHistory();
  const { id } = useParams<{ id: string }>();
  
  // 模拟通知数据
  const notification = {
    id: id || 'notif-1',
    title: `通知标题 ${id?.split('-')[1] || '1'}`,
    content: `这是通知的详细内容。通知ID为${id}。此通知包含更详细的信息，可能包括多段落内容、图片或其他媒体资源。\n\n您可以在此页面查看通知的完整内容，并执行相关操作，如标记为已读、删除或回复等。`,
    timestamp: '3小时前',
    read: true,
    type: 'system',
    sender: {
      name: '系统管理员',
      avatar: 'https://i.pravatar.cc/150?img=5'
    }
  };

  const handleBack = () => {
    history.goBack();
  };

  const handleDelete = () => {
    // 实际应用中这里会调用API删除通知
    history.goBack();
  };

  return (
    <IonPage>
      <IonHeader>
        <IonToolbar>
          <IonButtons slot="start">
            <IonButton onClick={handleBack}>
              <IonIcon slot="icon-only" icon={arrowBack} />
            </IonButton>
          </IonButtons>
          
          <IonTitle>通知详情</IonTitle>
          
          <IonButtons slot="end">
            <IonButton onClick={handleDelete}>
              <IonIcon slot="icon-only" icon={trash} />
            </IonButton>
            <IonButton>
              <IonIcon slot="icon-only" icon={ellipsisHorizontal} />
            </IonButton>
          </IonButtons>
        </IonToolbar>
      </IonHeader>
      
      <IonContent className="ion-padding">
        <IonGrid>
          <IonRow className="ion-justify-content-center">
            <IonCol size="12" sizeMd="8" sizeLg="6">
              <div className="notification-header">
                <IonAvatar className="sender-avatar">
                  <img src={notification.sender.avatar} alt={notification.sender.name} />
                </IonAvatar>
                
                <div className="sender-info">
                  <IonLabel className="sender-name">{notification.sender.name}</IonLabel>
                  <IonNote className="notification-time">
                    <IonIcon icon={timeOutline} size="small" />
                    {notification.timestamp}
                  </IonNote>
                </div>
              </div>
              
              <div className="notification-content">
                <h1 className="notification-title">{notification.title}</h1>
                
                <IonText className="notification-body">
                  <p>{notification.content}</p>
                </IonText>
              </div>
              
              <div className="notification-actions">
                <IonButton expand="block" color="primary">
                  回复
                </IonButton>
                <IonButton expand="block" fill="outline" color="medium">
                  标记为未读
                </IonButton>
              </div>
            </IonCol>
          </IonRow>
        </IonGrid>
      </IonContent>
    </IonPage>
  );
};

export default NotificationDetailPage;